<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body>
    <div id="stu">
        <div>
            <button class="layui-btn layui-btn-normal" onclick="javascript:location.href='./movieAdd.html'" data-target="movie/movieAdd.html">添加电影</button>
            <input type="text" id="morename" size="25" style="width:100px;height:35px;"lay-verify="required" placeholder="请输入电影细节" autocomplete="off" > <button class="layui-btn layui-btn-normal" id="trueButton">确认搜索</button>
        </div>
        <table id="tabStudent" lay-filter="test"></table>
    </div>
    <script src="../js/jquery-1.12.4.min.js"></script>

    <script src="../js/lodash.min.js"></script>
    <script src="../layui/layui.js"></script>

    <script>
        layui.use('table', function () {
            const table = layui.table;

            //第一个实例
            const tabObj = table.render({
                elem: '#tabStudent',
                url: '/api/movie',
                autoSort: true,
                page: true,
                cols: [
                    [{
                        field: 'name',
                        title: '电影名',
                        sort: true,
                        width: 180

                    }, {
                        field: 'type',
                        title: '类型',
                        sort: true,
                        width: 180

                    }, {
                        field: 'area',
                        title: '地区',
                        width: 180

                    }, {
                        field: `time`,
                        title: '时长',
                        sort: true,
                        width: 120

                    }, {
                        title: '正在热映',
                        field: "isHot",
                        sort: true,
                        templet: "#isHot",
                        width: 120

                    },
                    {
                        title: '即将上映',
                        field: "isComing",
                        templet: "#isComing",
                        sort: true,
                        width: 120

                    },
                    {

                        title: '经典影片',
                        field: "isClassic",
                        templet: "#isClassic",
                        width: 120,

                        sort: true
                    }, {
                        title: "操作",
                        templet: "#tabOperation"
                    }]
                ]
            });
            table.on('sort(test)', function (obj) {
                tabObj.reload({
                    initSort: obj,
                    where: {
                        field: obj.field,
                        order: obj.type //排序方式
                    }
                });
            });
            layui.use("form", function () {
                const form = layui.form;
                //设置开关按钮
                form.on('switch(adminDemo)', function (obj) {
                    $.ajax({
                        url: "/api/movie/" + obj.value,
                        method: "put",
                        data: {
                            isHot: obj.elem.checked
                        }
                    })
                })
                //设置开关按钮
                form.on('switch(adminDemo1)', function (obj) {
                    $.ajax({
                        url: "/api/movie/" + obj.value,
                        method: "put",
                        data: {
                            isComing: obj.elem.checked
                        }
                    })
                })
                //设置开关按钮
                form.on('switch(adminDemo2)', function (obj) {
                    $.ajax({
                        url: "/api/movie/" + obj.value,
                        method: "put",
                        data: {
                            isClassic: obj.elem.checked
                        }
                    })
                })
            })

        });
    </script>
    <script type="text/html" id="isHot">
        <input type="checkbox" name="isHot" value="{{d._id}}" lay-skin="switch" lay-text="是|否" lay-filter="adminDemo"{{d.isHot == true ? 'checked' : ''}}>
  </script>
    <script type="text/html" id="isComing">
    <input type="checkbox"  lay-skin="switch" value="{{d._id}}" name="isComing" lay-text="是|否" lay-filter="adminDemo1"{{d.isComing == true ? 'checked' : ''}}>
  </script>
    <script type="text/html" id="isClassic">
    <input type="checkbox" lay-skin="switch" value="{{d._id}}" name="isClassic" lay-text="是|否" lay-filter="adminDemo2"{{d.isClassic == true ? 'checked' : ''}}>
  </script>
    <script type="text/html" id="tabOperation">
                <div class="layui-btn-group">
                    <button class="layui-btn layui-btn-sm" data-target="student/edit.html"  onclick="alter('{{d._id}}')" data-id="{{d.id}}">
                        <i class="layui-icon">基本信息</i>
                    </button>
                    <button class="layui-btn layui-btn-sm"  data-target="student/edit.html"  data-id="{{d.id}}" onclick="diector('{{d._id}}')">
                        <i class="layui-icon" >导演</i>
                    </button>
                    <button class="layui-btn layui-btn-sm" data-target="student/edit.html"  onclick="actor('{{d._id}}')" data-id="{{d.id}}">
                        <i class="layui-icon">演员</i>
                    </button>
                  
                    <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delCourse('{{d._id}}', this)">
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </div>
                
    </script>

    <script>


        function alter(id) {
            window.location = "./movieAlter.html"
            localStorage.setItem("movieid", id)
        }
        function diector(id) {
            layui.use('layer', function () {
                var layer = layui.layer;
                localStorage.setItem("diectorid", id)

                layer.open({
                    title: '电影'
                    , type: 2
                    , content: 'layui.html'
                    , area: ["800px", "400px"]

                });

            });
        }

        function actor(id) {
            layui.use('layer', function () {
                var layer = layui.layer;
                localStorage.setItem("actorid", id)
                layer.open({
                    title: '电影'
                    , type: 2
                    , content: 'layui1.html'
                    , area: ["800px", "400px"]

                });

            });
        }




        function delCourse(id, btn) {
            layer.confirm('确定删除吗？', {
                icon: 3,
                title: '提示'
            }, function (index) {
                $.ajax({
                    url: "/api/movie/" + id,
                    method: "delete"
                });
                $(btn).parents("tr").remove();
                layer.close(index);
            });
        }

    </script>
    <script>
    $("#trueButton").click(function(){
        
       const key= $("#morename").val()
        layui.table.reload("tabStudent", {
                where: {
                    key     
                }
            });
    })
    </script>
</body>

</html>